<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<html>
<head>
    <title>${result == null ? '新增成绩' : '编辑成绩'}</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .layui-form-item {
            display: flex;
        }

        .flex-4 {
            flex: 0.3;
        }

        .flex-3 {
            flex: 0.3;
        }

        .flex-2 {
            flex: 0.2;
        }

        .flex-10 {
            flex: 0.65;
        }

        .layui-form-label {
            padding-left: 10px !important;
            padding-right: 10px !important;
            text-align: left !important;
        }

        .label-text {
            padding-left: 0px !important;
            text-align: left !important;
            font-size: 16px !important;
        }

        .layui-form {
            border: 1px solid #e2e2e2 !important;
            background-color: white !important;
        }

        .footer-buttons {
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            background: #fff;
            padding: 10px;
            text-align: right
        }

        .layui-btn-sm i {
            font-size: 15px !important;
        }

        .footer-place {
            height: 58px;
        }

        .f-search-bar {
            background-color: white;
            padding-left: 10px;
            border-bottom-width: 0;
            margin-bottom: 10px;
        }

        .result-list .layui-form-item {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="tag-wrap p10">
    <div class="f-search-bar">
        <div class="search-container">
            <ul class="search-form-content">
                <li class="form-item"><label class="search-form-lable">赛程</label>
                    <div class="check-btn-inner" id="timeType">
                        <c:forEach var="schedule" items="${schedules}" varStatus="status">
                            <a href="javascript:void(0)" onclick="toggleTab(this)" class="schedule-item ${status.index == 0 ? 'active' : ''}" data-id="${schedule.id}">
                                <fmt:formatDate value="${schedule.playDay}" pattern="MM/dd"/>
                            </a>
                        </c:forEach>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <form class="layui-form" method="post">
        <div class="layui-form-item" style="margin-bottom: 0px !important;">
            <div class="layui-inline flex-4">
                <label class="layui-form-label f16">队伍名称</label>
            </div>
            <div class="layui-inline flex-3">
                <label class="layui-form-label f16">里程</label>
            </div>
            <div class="layui-inline flex-10">
                <label class="layui-form-label f16 label-text">赛事成绩</label>
            </div>
            <div class="layui-inline flex-2">
                <label class="layui-form-label f16 label-text">计入总成绩</label>
            </div>
            <div class="layui-inline flex-2">
                <label class="layui-form-label label-text">操作</label>
            </div>
        </div>
        <div class="result-list">

        </div>
        <div class="footer-buttons">
            <a class="layui-btn layui-btn-danger" href="javascript:doSubmit()">立即提交</a>
            <a class="layui-btn layui-btn-primary" href="javascript:closeSelf()">取消</a>
        </div>
    </form>
    <div class="footer-place"></div>
</div>
</body>
<script type="text/html" id="result_template">
    {{# layui.each(d.groups, function(i, group){ }}
    <div class="layui-form-item result-item">
        {{# var hours = '', minutes = '', seconds = '', id = '', actualRange = '', openStatus; }}

        {{# layui.each(d.results, function(j, cResult){ }}
            {{# if(group.id == cResult.groupId){ }}
                {{# hours = cResult.hours; }}
                {{# minutes = cResult.minutes; }}
                {{# seconds = cResult.seconds; }}
                {{# id = cResult.id; }}
                {{# actualRange = cResult.actualRange; }}
                {{# openStatus = cResult.openStatus; }}
            {{# } }}
        {{# }) }}
        <input type="hidden" name="results[{{ i }}].scheduleId" value="{{ d.scheduleId }}"/>
        <input type="hidden" name="results[{{ i }}].groupId" value="{{ group.id }}"/>
        <input type="hidden" name="results[{{ i }}].id" value="{{ id }}" class="item-id"/>
        <input type="hidden" name="projectId" value="{{ d.projectId }}"/>
        <div class="layui-inline flex-4">
            <label class="layui-form-label" style="width: 100%">{{ group.groupName }}</label>
        </div>
        <div class="layui-inline flex-3">
            <div class="layui-input-inline" style="width: 90px!important;">
                <input type="text" name="results[{{ i }}].actualRange" class="layui-input item-range" data-distance="{{ actualRange }}" value="{{ actualRange }}">
            </div>
            <div class="layui-form-mid layui-word-aux">KM</div>
        </div>
        <div class="layui-inline flex-10">
            <div class="layui-input-inline" style="width: 70px!important;">
                <input type="text" name="results[{{ i }}].hours" class="layui-input item-result-hours" value="{{ hours }}">
            </div>
            <div class="layui-form-mid layui-word-aux">时</div>
            <div class="layui-input-inline" style="width: 70px!important;">
                <input type="text" name="results[{{ i }}].minutes" class="layui-input item-result-minutes" value="{{ minutes }}">
            </div>
            <div class="layui-form-mid layui-word-aux">分</div>
            <div class="layui-input-inline" style="width: 70px!important;">
                <input type="text" name="results[{{ i }}].seconds" class="layui-input item-result-seconds" value="{{ seconds }}">
            </div>
            <div class="layui-form-mid layui-word-aux">秒</div>
        </div>
        <div class="layui-inline flex-2">
            <div class="layui-input-inline" style="width: 70px!important;">
                <input type="checkbox" name="results[{{ i }}].openStatus" class="item-status"
                       {{ openStatus == 1 || !util.isValid(openStatus) ? 'checked' : '' }}
                       value="1" lay-skin="primary" lay-filter="openStatus" />
            </div>
        </div>
        <div class="layui-inline flex-2">
            {{# if(util.isValid(id)){ }}
                <a class="layui-btn layui-btn-danger layui-btn-sm btn-delete"><i class="iconfont icon-delete btn-icon"></i> 删除</a>
            {{# }else{ }}
                <a class="layui-btn layui-btn-primary layui-btn-sm btn-clear"><i class="iconfont icon-delete btn-icon"></i> 清除</a>
            {{# } }}
        </div>
    </div>
    {{# }) }}
</script>
<script type="text/javascript">
    var form = null, laytpl = null, groupItems;


    $(function () {
        layui.use(['form', 'laydate', 'element', 'laytpl'], function () {
            form = layui.form, laydate = layui.laydate, element = layui.element, laytpl = layui.laytpl;

            var scheduleId = $(".schedule-item.active").data("id");
            loadData(scheduleId);

            form.on('checkbox(openStatus)', function (data) {
                var checked = data.checked;
                if (checked) {
                    $(data.elem).val(1);
                } else {
                    $(data.elem).val(2);
                }
            })
        });
        $('.layui-form').delegate('.result-item', 'click', function (e) {
            var $target = $(e.target);
            if ($target.hasClass("icon-delete")) {
                var $parent = $target.parent();
                var item = $parent.closest(".result-item");
                if ($parent.hasClass("btn-clear")) {
                    clear(item);
                } else if ($parent.hasClass("btn-delete")) {
                    deleteResult(item);
                }
            }
            if ($target.hasClass("btn-clear")) {
                clear($target);
                e.stopPropagation();
            } else if ($target.hasClass("btn-delete")) {
                var item = $target.closest(".result-item");
                deleteResult(item);
                e.stopPropagation();
            }
        });

        function clear(target) {
            var item = $(target).closest(".result-item");
            $(item).find(".item-result-hours").val("");
            $(item).find(".item-result-minutes").val("");
            $(item).find(".item-result-seconds").val("");
            $(item).find(".item-range").val("");
            $(item).find(".item-status").prop('checked', false);
            form.render('checkbox');
        }

        function deleteResult(item) {
            var id = $(item).find(".item-id").val();

            $.ajax({
                type: 'POST',
                url: '${ctx}/competition/groupResult/deleteResult.do',
                data: {
                    id: id
                },
                dataType: 'JSON',
                success: function (data) {
                    util.layerMsgSuccess("删除成功", function () {
                        window.location.reload();
                    })
                },
                error: function (data) {
                    util.layerMsgError("删除失败")
                }
            });
        }
    });

    function doSubmit() {
        var isSuccess = true;
        var _count = 0;
        $(".result-item").each(function (i, ele) {
            _count++;
            var reg = /^\d+$/;
            var _status = $(ele).find(".item-status").prop('checked');
            var _distance = $(ele).find(".item-range").val().trim();
            var _itemResult_hours = $(ele).find(".item-result-hours").val();

            var _itemResult_minutes = $(ele).find(".item-result-minutes").val();

            var _itemResult_seconds = $(ele).find(".item-result-seconds").val();

            var flag = true;
            if (util.isValid(_distance) && !util.checkFloat(_distance)) {
                flag = false;
            } else if (util.isValid(_itemResult_hours) && !reg.test(_itemResult_hours)) {
                flag = false;
            } else if (util.isValid(_itemResult_minutes) && !reg.test(_itemResult_minutes)) {
                flag = false;
            } else if (util.isValid(_itemResult_seconds) && !reg.test(_itemResult_seconds)) {
                flag = false;
            }

            if (_status) {
                $(ele).find(".item-status").val(1);
            } else {
                $(ele).find(".item-status").val(2);
            }
            if (!flag) {
                util.layerMsgError("格式不正确")
                isSuccess = false;
                return false;
            }

            if ((util.isValid(_distance) || _status) && (_itemResult_hours == "" || _itemResult_minutes == "" || _itemResult_seconds == "")) {
                util.layerMsgError("请将信息填写完整")
                isSuccess = false;
                return false;
            }
        });
        if (_count == 0) {
            util.layerMsgError("还没有队伍，不能保存")
            return false;
        }
        if (isSuccess) {
            var paramsArray = $("form").serializeArray();
            var flag = true;
            var values = {};
            $.each(paramsArray, function (i, param) {
                values[param.name] = param.value;
            });

            if (flag) {
                //loading层
                var loadIndex = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                $.post("${ctx}/competition/groupResult/saveResult.do", values, function (res) {
                    layer.close(loadIndex);
                    if (res.success) {
                        util.layerMsgSuccess("提交成功", function () {
                            var scheduleId = $(".schedule-item.active").data("id");
                            loadData(scheduleId);
                        })
                    } else {
                        util.layerMsgError("提交失败")
                    }
                });
            }
        }
    }

    function closeSelf() {
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        top.layer.close(index);
    }

    function toggleTab(that) {
        $(".schedule-item").removeClass("active");
        $(that).addClass("active");

        var scheduleId = $(that).data("id");
        loadData(scheduleId);
    }

    function loadData(scheduleId) {
        var projectId = '${projectId}';
        txz.ajaxRequest({
            method: 'get',
            url: '${ctx}/competition/groupResult/getResultByProjectId.do',
            saveCache: false,
            cacheObj: null,
            params: {
                projectId : projectId,
                scheduleId : scheduleId,
                isNew : util.isValid(groupItems) ? false : true
            },
            callBack: function (res) {
                if (res.success) {
                    var result =  res.data;
                    if (!util.isValid(groupItems)) {
                        groupItems = res.data.groups;
                    } else {
                        res.data.groups = groupItems;
                    }
                    result['scheduleId'] = scheduleId;
                    result['projectId'] = projectId;

                    var $content = $(".result-list");
                    var getTpl = $("#result_template").html();
                    laytpl(getTpl).render(result, function (html) {
                        $content.html(html);
                    });
                    form.render('checkbox');
                } else {
                    util.layerMsgError("加载数据异常")
                }
            }
        });
    }
</script>
</html>